<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-table :data="list" size="small" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='ID' width="120px">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="主题名" width="200px" align="center">
        <template slot-scope="scope">
          <svg-icon icon-class="vip" v-if="scope.row.vip == 1" class="vip-icon"/>&nbsp;{{scope.row.theme_name}}
        </template>
      </el-table-column>
      <el-table-column label="首次订阅时间" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.create_time}}
        </template>
      </el-table-column>
      <el-table-column label="操作时间" align="center" width="160px">
        <template slot-scope="scope">
          {{scope.row.update_time}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="120px">
        <template slot-scope="scope">
          <span>
            <el-dropdown size="small" split-button type="primary" @command="opHandler">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="scope.row.cmd_cancel">取消订阅</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUserThemes } from '@/api/user'
import { cancelSub } from '@/api/theme'

export default {
  data() {
    return {
      uid: 'undefined',
      list: null,
      listQuery: { uid: 'undefined' },
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  mounted() {
    // 重置数据, 每次进入页面的时候
    this.uid = this.$route.query.uid
    if (this.uid === undefined) {
      this.uid = 0
    }
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.listQuery['uid'] = this.uid
      getUserThemes(this.listQuery).then(res => {
        console.log(res)
        this.list = res.items
        this.listLoading = false
      })
    },
    onReload() {
      this.fetchData()
    },
    opHandler(command) {
      // this.listLoading = true
      const cmdInfo = command.split(':')
      switch (cmdInfo[0]) {
        case 'cancel':
          this.targetId = cmdInfo[1]
          this.cancelHandler(this.targetId)
          break
        default:
          console.log('no law command')
      }
    },
    cancelHandler(id) {
      cancelSub(id).then(res => {
        this.$message.success('取消订阅成功')
        // 更新数据
        this.fetchData()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .vip-icon {
    color:orange;
    font-size:16px;
  }
</style>


